<template>
    <n-page-header subtitle="学习为了我们更快乐">
        <n-grid :cols="4">
            <n-gi>
                <n-card>
                    <template #cover>
                        <img src="http://www.520it.com/ke/upload/20180720/upload_0d5f30203711bf5166c472f85c13d808.jpg" />
                    </template>
                    <div class="card_buttom">
                        <n-button  ghost color="#8a2be2">查看详情</n-button>
                        <n-button type="info" color="#ff69b4" ghost>立即购买</n-button>
                    </div>
                </n-card>
            </n-gi>
            <n-gi>
                <n-card>
                    <template #cover>
                        <img src="	http://www.520it.com/ke/upload/20180408/upload_32f1b454959138939c17a69fc36499e0.png" />
                    </template>
                    <div class="card_buttom">
                        <n-button  ghost color="#8a2be2">查看详情</n-button>
                        <n-button type="info" color="#ff69b4" ghost>立即购买</n-button>
                    </div>
                </n-card>
            </n-gi>
            <n-gi>
                <n-card>
                    <template #cover>
                        <img src="http://www.520it.com/ke/upload/20180408/upload_38eb4d4155d0fb7c762d59198d12d2f6.jpg" />
                    </template>
                    <div class="card_buttom">
                        <n-button  ghost color="#8a2be2">查看详情</n-button>
                        <n-button type="info" color="#ff69b4" ghost>立即购买</n-button>
                    </div>
                </n-card>
            </n-gi>
            <n-gi>
                <n-card>
                    <template #cover>
                        <img src="http://www.520it.com/ke/upload/20180408/upload_82269c4ec128383fbff0238f2735cc65.jpg" />
                    </template>
                    <div class="card_buttom">
                        <n-button  ghost color="#8a2be2">查看详情</n-button>
                        <n-button type="info" color="#ff69b4" ghost>立即购买</n-button>
                    </div>
                </n-card>
            </n-gi>
        </n-grid>
        <template #title>
            <a href="javascript:;" style="text-decoration: none; color: inherit;"
            >精选视频</a
            >
        </template>
        <template #avatar>
            <n-avatar
                    src="https://cdnimg103.lizhi.fm/user/2017/02/04/2583325032200238082_160x160.jpg"
            />
        </template>
        <template #extra>
            <n-space>
                <n-dropdown :options="options" @select="handleSelect"  placement="bottom-start">
                    <n-button :bordered="false" style="padding: 0 4px">· · ·</n-button>
                </n-dropdown>
            </n-space>
        </template>
    </n-page-header>
</template>

<script>
  import { defineComponent } from 'vue'
  export default defineComponent({
    components: {

    },
    setup () {
      return {
        options: [
          {
            label: '更多',
            key: 'ISN'
          },
        ]
      }
    },
    methods: {
      handleSelect(item) {
        console.log(item)
      }

    }
  })
</script>

<style lang="scss" scoped>
    .n-card {
        max-width: 240px;
        .n-page-header {
            background-color: #fff;
            height: 50px;
            line-height: 50px;
        }
        .card_buttom {
            display: flex !important;
            margin-top: 8px;
            padding: 0;
            justify-content: space-between;

        }
    }
</style>
